<template>
	<div>
		<el-dialog v-model="showDialog" title="预约取号" width="900px" draggable>
			<el-button v-if="props.batchNo == 0" style="margin-bottom: 10px" type="primary" @click="addOrder()">新增一行</el-button>
			<el-table :data="orderList" style="width: 100%" height="400" border>
				<el-table-column fixed prop="name" label="预约客户" width="150">
					<template #default="{ row, $index }">
						<el-select
							:disabled="props.batchNo != 0"
							@change="changeUser($index, row.client_id)"
							v-model="row.client_id"
							class="m-2"
							placeholder="预约客户"
						>
							<el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id" />
						</el-select>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="客户唛头" width="150">
					<template #default="{ row }">
						<div><el-input :disabled="props.batchNo != 0" v-model="row.user_mark" placeholder="客户唛头" /></div>
					</template>
				</el-table-column>
				<el-table-column min-width="260" prop="name" label="订单备注">
					<template #default="{ row }">
						<div><el-input :disabled="props.batchNo != 0" v-model="row.remarks" placeholder="订单备注" /></div>
					</template>
				</el-table-column>
				<el-table-column width="100" prop="name" label="数量">
					<template #default="{ row }">
						<div><el-input :disabled="props.batchNo != 0" v-model="row.num" placeholder="数量" /></div>
					</template>
				</el-table-column>

				<el-table-column label="操作" prop="addtime" width="130" fixed="right">
					<template #default="{ $index, row }">
						<el-button v-if="orderList.length > 1 && props.batchNo == 0" @click="delet($index)" type="primary">删除</el-button>
						<el-button v-if="props.batchNo != 0" @click="print(row)" type="primary">打印</el-button>
					</template>
				</el-table-column>
			</el-table>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">取消</el-button>
					<el-button v-if="type == 1" type="primary" @click="addSubmit()">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, toRaw } from "vue";
import { listClientNo } from "@/api/modules/address";
import { createPrepare, detailPrepare } from "@/api/modules/appointment";

import { ElMessage, ElMessageBox } from "element-plus";

const emit = defineEmits(["update:showDialog", "reload", "print"]);
const props = defineProps({
	showDialog: {
		required: true,
		type: Boolean
	},
	batchNo: {
		required: false,
		type: Number
	},
	type: {
		required: false,
		type: Number
	}
});
const showDialog = computed({
	get() {
		return props.showDialog;
	},
	set(value) {
		emit("update:showDialog", value);
	}
});
const orderList: any = ref([{ client_id: "", user_mark: "", remarks: "", num: "" }]);
const userList = ref();

watch(
	() => showDialog.value,
	() => {
		if (showDialog.value) {
			orderList.value = [{ client_id: "", user_mark: "", remarks: "", num: "" }];
			if (props.batchNo) {
				//获取批次详情
				detailPrepare({
					batch_no: props.batchNo
				}).then(res => {
					orderList.value = res.data;
				});
			}
		}
	}
);
onMounted(() => {
	//客户列表
	listClientNo({}).then(res => {
		userList.value = res.data;
		userList.value.unshift({
			id: 0,
			user_mark: "",
			username: "散户"
		});
	});
});
const changeUser = (index: any, client_id: number) => {
	userList.value.forEach((item: any) => {
		if (item.id == client_id) {
			orderList.value[index].user_mark = item.user_mark;
		}
	});
};
const addOrder = () => {
	orderList.value.push({ client_id: "", user_mark: "", remarks: "", num: "" });
};
const delet = (index: number) => {
	orderList.value.splice(index, 1);
};
const addSubmit = () => {
	createPrepare({ list: orderList.value }).then(res => {
		ElMessage.success("预约取号成功");
		showDialog.value = false;
		emit("reload");
	});
};
const print = (row: any) => {
	emit("print", row);
};
</script>

<style lang="scss" scoped></style>
